<template>
   <div class="headerNav">
        <div class="headerNav-wrap wrap">
   		   <div class="logo">
                <img :src="require('../../static/images/logo.png')">
            </div>
            <ul class="nav" >
               <li @click="active(item,$event.target)" :class="{current:item.current}" v-for="item in items" >
                   <router-link :to="item.src">
                         {{item.name}}
                    </router-link>
               </li>
            </ul>
        </div>
        
   </div>
</template>

<script>
import $ from '../../static/js/jquery.min'
export default {
    data(){
        var v = [{
                    "id":1,
                    "name":"首頁",
                    "current":false,
                    "src":"/",
                },{
                    "name":"所有屋苑成交及詳細資料",
                    "current":false,
                    "src":"/allHouses",
                },{
                    "name":"澳門經濟數據",
                    "current":false,
                    "src":"/trendChart",
                },{
                    "name":"據現時市場上最新放盤<租/售>",
                    "current":false,
                    "src":"/allSpace",
                },{
                    "name":"室內設計",
                    "current":false,
                    "src":"/interiorDesign",
                },{
                    "name":"貸款業務",
                    "current":false,
                    "src":"/loanTransaction",
                },{
                    "name":"新手置業指南<推薦>",
                    "current":false,
                    "src":"/guide",
                },{
                    "id":8,
                    "name":"關於我們",
                    "current":false,
                    "src":"/aboutUs",
                }];
        v.map((item,index)=>{
             item.current = item.src == this.$route.path;
            // item.current = item.src == this.$route.path.substring(0,this.$route.path.indexOf("?")>0?this.$route.path.indexOf("?"):this.$route.path.length);
            
        })
        return {"items":v};
    },
    mounted(){
        /*導航欄*/
        var $t, leftX, newWidth;
        $('.headerNav-wrap .nav').append('<div class="block"></div>');
        var $block = $('.block');

        $block.width($(".current").width()).css('left', $('.current a').position().left);

        $('.headerNav-wrap .nav li').find('a').hover(function() {
            $t = $(this);
            leftX = $t.position().left;
            newWidth = $t.parent().width();

            $block.stop().animate({
                left: leftX,
                width: newWidth
            },300);
        }, function() {
            $block.stop().animate({
                left: $(".current a").position().left,
                width: $(".current a").width()
            },300)
        })
    },
    updated(){
        var active = null;
        this.items.map((item,index)=>{
            (item.current = item.src == this.$route.path)?active = $(".headerNav-wrap .nav li")[index]:"";
        });
        $('.block').stop().animate({
                left: $(".current a").position().left,
                width: $(".current a").width()
            },300)
    },
    methods:{
        active(activeItem,target){
            this.items.map((item)=>{
                item.current = false;
            });
            activeItem.current = true;
            $('.block').stop().animate({
                left: target.offsetLeft,
                width: target.innerWidth
            },300);
        },
    }
}
</script>

<style lang="scss">
    @import "../style/base/_base";

    .headerNav{
        @include vertical-centering;
        height:86px;
        box-shadow: 0px 5px 9px rgba(0,64,128,0.1);
        .loanTransaction{
            color:red;
        }
        .headerNav-wrap{
            @include flex;
            justify-content:space-between;
            .logo{
                width: 120px;
                height:64px;
                img{
                    width:100%;
                }
            }
            .trendChart{
                color:red;
                .is-active{
                      color:red;
                }
            }
            .nav{
                @include vertical-centering;
                position: relative;
                li{
                    padding-left: 40px;
                    a{
                        display: block;
                        font-size: 16px;
                        color: #004080;
                    }
                }
                .current{
                    a{
                        color: #ff6840;
                    }
                }
                .block {
                    width: 48px;
                    height: 2px;
                    background: #ff6840;
                    position: absolute;
                    bottom: 0px;
                    left: 0;
                    z-index: 99;
                }
            }
        }
    }
</style>